<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>

</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333
            <span>我是子元素</span>
        </li>
        <li>444</li>
        <li>555</li>
    </ul>
    <button>点击</button>
    <script>
        // 文档操作 
        // 1.创建元素 
        // document.createElement("div");
        // 直接创建一个jq元素
        // var res =  $("<div>hello</div>");
        // console.log(res);

        // 创建jq元素的同时 设置属性 
        // var res = $("<div>hello</div>");
        // console.log(res);

        // 2.添加到页面里去 append
        // 在ul容器的最后追加元素 ；
        // 父级元素.append(要添加的元素);
        // $("ul").append(res)

        // 3.appendTo 参数是反的 ；

        // $("button").click(function(){
        //     $("<p>我是p标签</p>").appendTo($("ul"));
        // })

        // 4.可以添加到父级元素的开头位置
        // $("button").on("click",function(){
        // $("ul").prepend("<div>开始的地方</div>");

        // })

        // 5.追加在容器的最开始 
        $("button").on("click",function(){
           $("<div>开始的地方</div>").prependTo($("ul"));
        })


        // 6. 元素加载某个元素之前  同级元素之间添加
        // before
        // var ele = $("<div>我是创建的元素</div>");
        // $("button").click(function(){
        //     $("li").eq(2).before(ele);
        // })

        // insertBefore 

        // var ele = $("<div>我是创建的元素</div>");
        // $("button").click(function(){
        //     ele.insertBefore($("li").eq(2));
        // })


        // 7.把元素添加再某个元素之后 
        // after
        // var ele = $("<div>我是新加的元素</div>");
        // $("button").click(function(){
        //     $("li").eq(2).after(ele);
        // })

        // insertAfter
        // var ele = $("<div>我是新加的元素</div>");
        // $("button").click(function(){
        //     ele.insertAfter($("li").eq(2));
        // })

        // 8.删除元素 
        //  删除元素  :remove
        // $("button").click(function(){
        //     $("li").eq(2).remove();
        // })

        // 清空元素里的内容
        // $("button").click(function(){
        //     $("li").eq(2).empty();
        // })


        // 9.克隆元素 
        // cloneNode(true)
        // 默认是可以克隆子元素的 ；
        // 第一个参数 是 是否克隆 事件 ，默认是 false 不克隆事件,可以克隆事件
        // 第二个参数 是 是否克隆子元素的事件 默认是false 如果没有设置会跟随第一个参数
        $("li").eq(2).on("click",function(){
            console.log("hello");
        })
        $("li").eq(2).children().on("click",function(){
            console.log("子元素触发了");
        })

       var ele =  $("li").eq(2).clone(true,false);
       $("button").on("click",function(){
            $("ul").append(ele);
       })


      






    </script>
</body>
</html>